<template>
  <div class="auxiliaryDisplay-container">
    <div
      v-tooltip.top="'坐标'"
      class="auxiliary-elem"
      :class="{ 'active-elem ': showAxes }"
      @click.stop="
        () => {
          showAxes = !showAxes;
        }
      "
    >
      <vis-icon size="16px" code="#iconzuobiaozhou"></vis-icon>
    </div>
    <div
      v-tooltip.top="'网格'"
      class="auxiliary-elem"
      :class="{ 'active-elem ': showGrid }"
      @click.stop="
        () => {
          showGrid = !showGrid;
        }
      "
    >
      <vis-icon size="16px" code="#iconwangge"></vis-icon>
    </div>
    <div
      v-tooltip.top="'辅助'"
      class="auxiliary-elem"
      :class="{ 'active-elem ': showHelper }"
      @click.stop="
        () => {
          showHelper = !showHelper;
        }
      "
    >
      <vis-icon size="16px" code="#iconxiankuang"></vis-icon>
    </div>
    <!-- <div
      v-tooltip.top="'控件'"
      class="auxiliary-elem"
      :class="{'active-elem ': showTransformControls}"
      @click.stop="() => {showTransformControls = !showTransformControls}">
      <vis-icon size="16px" code="#iconkongjian1"></vis-icon>
    </div> -->
  </div>
</template>

<script>
export default {
  props: {
    sceneConnector: {
      type: Object,
      required: true,
    },
    engineConnector: {
      type: Object,
      required: true,
    },
  },
  data() {
    return {
      showAxes: true,
      showGrid: true,
      showHelper: true,
      showTransformControls: true,
    };
  },
  watch: {
    showAxes: {
      handler(newVal) {
        this.sceneConnector.showAxesHelper(newVal);
      },
      immediate: true,
    },
    showGrid: {
      handler(newVal) {
        this.sceneConnector.showGridHelper(newVal);
      },
      immediate: true,
    },
    showHelper: {
      handler(newVal) {
        this.sceneConnector.showObjectHelper(newVal);
      },
      immediate: true,
    },
    showTransformControls: {
      handler(newVal) {
        this.engineConnector.setTransformControls(newVal);
      },
    },
  },
};
</script>

<style lang="less" scoped>
.auxiliaryDisplay-container {
  .flexLayout(row, center, center);
  background: @brighterTheme-backgroundColor;
  height: 20px;
  > .auxiliary-elem {
    .flexLayout(row, center, center);
    padding: 0 @box-padding / 2;
    .transitionSetting({
      background: @themeDarkHover-color;
    });
    border-left: 1px solid @darkestTheme-backgroundColor;
    cursor: pointer;
  }
  > .auxiliary-elem:first-child {
    border-left: unset;
  }
  > .active-elem {
    height: 100%;
    background: @theme-color;
  }
}
</style>
